<template>
	<view class="wapper">
		<u-tabs :list="list"  lineWidth="28rpx" lineColor="#0358ff" :activeStyle="{
						               color: '#000',
						               fontWeight: '600',
						              
						           }" :inactiveStyle="{
						              color: '#000',
						              fontWeight: '300',
						              
						           }" :scrollable="false" itemStyle="padding-left: 15px; padding-right: 15px; width: 50%;height:88rpx;"
			@change="changetab"></u-tabs>
			<u-button type="error" text="批量删除"  style="width: 180rpx;margin-left: 30rpx;"  @tap="delall"></u-button>
		<view class="wzlist">
			<u-empty v-if="state.datalist.length<1">
			</u-empty>
			<view class="wzitem ss-flex" v-for="item in state.datalist"
				 @tap="state.chack1[item.id]=!state.chack1[item.id]">
				 <image :src="state.chack1[item.id]?'/static/icon_checked.png':'/static/icon_check.png'" mode="" style="width: 30rpx;height: 30rpx;"></image>
				<view class="" style="flex:1;margin-left:15rpx;">
					<view class="title ss-flex ss-row-between">
						{{item.title}}
						<u-button type="primary" text="编辑" size="mini" style="width: 80rpx;margin-right: 0;" @tap="LC.$router.go('/pages/user/addArate?id='+item.id)"></u-button>
					</view>
					<view class="botq ss-flex ss-row-between">
						<view class="ll">
							{{item.createtime}}
						</view>
						<view class=" ss-flex">
							<u-button type="warning " text="下架" size="mini" style="width: 80rpx;margin-right: 10rpx;" v-if="item.status===1"   @tap="sxj(item.id,index)"></u-button>
							<u-button type="success" text="上架" size="mini" style="width: 80rpx;margin-right: 10rpx;" v-if="item.status===0"  @tap="sxj(item.id,index)"></u-button>
							<u-button type="error" text="删除" size="mini" style="width: 80rpx;margin-right: 0;"  @tap="()=>{model.open();state.delid=item.id}"></u-button>
						</view>
						
					</view>
				</view>
				
			</view>
		</view>
		<uni-fab
					:popMenu="false"
					@trigger="trigger"
					@fabClick="LC.$router.go('/pages/user/addArate')"
				></uni-fab>
		<u-loadmore :status="state.pageData.status" font-size="26rpx" icon-size="36rpx" margin-top="30rpx" />
		<globalModel tip="确认删除？" ref="model" @confirm="del"></globalModel>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
import xDrag from '../../components/beyondGod-drag/x-drag.vue'
	let list = [{
		'name': "上架中"
	}, {
		'name': "已下架"
	}]
	import {
		openkf
	} from '../../utils/kf';
	
	import {
		reactive,
		computed
	} from 'vue';
	import LC from '../../LC';
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	
	let state = reactive({
		data: {
			category:[]
		},
		delid:0,
		chack1:{},
		pageData:{
			page: 1,
			limit:15,
			status: 'loading'
		},
		keyword:'',
		tabindex:0,
		
		datalist:[]
	})
	onLoad(()=>{
		onbottom()
	})
	onShow(()=>{
		uni.$once('updata',()=>changetab({index:state.tabindex}))
	})
	onReachBottom(() => {
			
		})
		
		
		
		function onbottom() {
		
			let {
				status,
				load,
				limit,
				page
			} = state.pageData
		
			if (status != 'nomore' && !load) {
		
				getlist()
		
		
			}
		}
		function changetab({index}){
			state.tabindex=index
			state.chack1={}
		
			state.pageData = {
				page: 1,
				limit:15,
				status: 'loading'
			}
			state.datalist = []
				
				
			getlist()
			
		}
		function delall(){
			let arr=[]
			for(let key in state.chack1) {
				state.chack1[key]?arr.push(key):''
			}
			if(!arr.length){
				return 
			}
			uni.showModal({
				title:'提示',
				content:'确认删除已选的'+arr.length+'条数据？',
				success:async  function (res) {
						if (res.confirm) {
							
							const res1 = await LC.$api.user.articledel({id:arr.join(",")})
							if (res1.code == 1) {
								
								changetab({index:state.tabindex})
								uni.$u.toast('删除成功')
							
							
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
			})
		}
		let model=ref(null)
		async function del(){
			const res = await LC.$api.user.articledel({id:state.delid})
			if (res.code == 1) {
				
				changetab({index:state.tabindex})
				uni.$u.toast('删除成功')
			
			
			}
			
		}
		async function sxj(id,index){
			const res = await LC.$api.user.articlepublish({id})
			if (res.code == 1) {
				
				changetab({index:state.tabindex})
				uni.$u.toast('成功')
			
			
			}
			
		}
	
		
		function getlist() {
		
			LC.$api.user.articlelist({
					...state.pageData,
					type: state.tabindex===0?1:0,
					
				})
				.then(({
					res,
					data
				}) => {
		
		
					state.datalist = [...state.datalist, ...data.data]
					
					if (data.data.length < state.pageData.limit) {
						state.pageData.status = 'nomore'
						return
					}
		
		
					state.pageData.status = 'loadmore'
					state.pageData.page += 1
		
				})
		
		}
</script>

<style lang="scss">
.wzlist {
		.wzitem {

			margin-top: 12rpx;
			height: 132rpx;
			background: #fff;
			box-shadow: 0px 0px 8px 0px rgba(23, 143, 255, .17);
			border-radius: 14rpx;
			padding: 0 30rpx;

			.title {
				font-size: 30rpx;
				font-weight: 400;
				color: #022853;
				padding-top: 22rpx;
			}
			.botq{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 13rpx;
				.ll{
					    background-color: rgba(35, 154, 255, .1);
					    border-radius:16rpx;
					    font-size: 22rpx;
					    font-weight: 400;
					    color: #005aff;
					    height: 36rpx;
					    padding: 0 20rpx;
				}
				.price{
					font-size: 22rpx;
					span{
						color: rgb(255, 0, 0);
					    font-weight: bold;
						padding-right: 5px;
					}
					       color: rgb(153, 153, 153);
					       
					       font-weight: 500; 
					
				}
			}
		

	}
	}

</style>